<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
  <meta charset="UTF-8">
  <title>装修风格</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="icon" th:href="@{/favicon.ico}">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
  <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body class="childrenBody" sec:authorize="hasPermission('/admin/decoration/toDecoration',null)">
<!-- 查询条件开始 -->
<blockquote class="layui-elem-quote">
  <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form layui-form-pane">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label" style="width: 90px">装修风格</label>
        <div class="layui-input-inline">
          <select name="id" id="search_decoration" lay-search="">
            <option value= '' >请选择装修风格</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-block" style="text-align: center;">
          <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch"><span
                  class="layui-icon layui-icon-search"></span>查询
          </button>
        </div>
      </div>
    </div>
  </form>
</blockquote>
<!-- 查询条件结束-->


<!-- 数据表格开始 -->
<div>
  <table class="layui-hide" id="decorationTable" lay-filter="decorationTable"></table>
  <div id="decorationToolBar" style="display: none;">
    <button type="button" lay-event="add" class="layui-btn layui-btn-sm" sec:authorize="hasPermission('/admin/decoration/addDecoration','decoration:add')">
      <span class="layui-icon layui-icon-add-1"></span>添加装修风格
    </button>
  </div>

  <div id="decorationRowBar" style="display: none;">
    <button type="button" lay-event="update" class="layui-btn layui-btn-sm" sec:authorize="hasPermission('/admin/decoration/updateDecoration','decoration:update')">
      <span class="layui-icon layui-icon-edit"></span>编辑
    </button>
    {{#  if(d.available == 1){ }}
    <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger" sec:authorize="hasPermission('/admin/decoration/deleteDecoration','decoration:delete')">
      <span class="layui-icon layui-icon-delete"></span>不可用
    </button>
    {{#  } }}
    {{#  if(d.available == 0){ }}
    <button type="button" lay-event="delete2" class="layui-btn layui-btn-sm layui-btn-warm" sec:authorize="hasPermission('/admin/decoration/deleteDecoration','decoration:delete')">
      <span class="layui-icon layui-icon-delete"></span>&ensp;可&ensp;用&ensp;
    </button>
    {{#  } }}
  </div>
</div>

<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 5px" id="addOrUpdateDiv" sec:authorize="hasPermission('/admin/decoration/addDecoration','decoration:add') || hasPermission('/admin/decoration/updateDecoration','decoration:update')">
  <form action=""  method="post" class="layui-form layui-form-pane" id="dataFrm" lay-filter="dataFrm">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">装修风格</label>
        <div class="layui-input-inline">
          <input type="hidden" name="id" value="0">
          <input type="text" name="style" id="style" lay-verify="required" autocomplete="off"
                 placeholder="请输入装修风格" class="layui-input" maxlength="20">
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-block">
          <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit"><span
                  class="layui-icon layui-icon-add-1"></span>提交
          </button>
        </div>
      </div>
    </div>
  </form>
</div>
<!-- 添加和修改的弹出层结束 -->

<script type="text/javascript" th:src="@{/layui/layui.js}"></script>

<script type="text/javascript">
  var tableIns;
  layui.use(['jquery', 'form', 'table', 'layer'], function () {
    var $ = layui.jquery;
    var form = layui.form;
    var table = layui.table;
    var layer = layui.layer;
    //加载 数据
    tableIns = table.render({
      elem: '#decorationTable'
      , url: '/admin/decoration/allDecoration'
      , dataFormat: 'list'
      , toolbar: '#decorationToolBar' //开启头部工具栏，并为其绑定左侧模板
      , title: '装修风格数据表'
      , page: true
      , cols: [ [
        {field: 'id', title: 'ID', align: 'center', width: '10%'}
        , {field: 'style', title: '装修风格', align: 'center',width: '60%'}
        , {field: 'available', title: '是否可用', align: 'center',width: '10%', templet: function (d) {
            return d.available == 1 ? '<span style="color: blue">可用</span>' : '<span style="color: red">不可用</font>';
          }
        }
        , {title: '操作', toolbar: '#decorationRowBar', align: 'center', width: '20%'}
      ] ]
      , done: function (res, curr, count) { //处理删除某一页最后一条数据的BUG
        if (res.data.length == 0 && curr != 1) {
          tableIns.reload({
            page: {
              curr: (curr - 1)
            }
          });
        }
      }
    });

    $.ajax({
      url: "/admin/decoration/getDecoration2",
      success: function (res){
        var decorations = res.data;
        var html = "<option value='0'>请选择装修风格</option>";
        $.each(decorations, function (index, item) {
          html += "<option value='" + item.id + "'>" + item.style + "</option>";
        });
        $("#search_decoration").html(html);
        form.render("select");
      },
      dataType: "json"
    });

    //模糊查询
    form.on("submit(doSearch)", function (data) {
      // layer.msg(JSON.stringify(data.field));
      tableIns.reload({
        where: data.field,
        page: {
          curr: 1
        }
      });
      return false;
    });

    //监听工具条的事件
    table.on("toolbar(decorationTable)", function (obj) {
      switch (obj.event) {
        case 'add':
          openAddLayer();
          break;
      };
    });

    //监听行工具条的事件
    table.on("tool(decorationTable)", function (obj) {
      var data = obj.data; //获得当前行数据
      switch (obj.event) {
        case 'update':
          openUpdateDecorationLayer(data);
          break;
        case 'delete':
          deleteDecoration(data);
          break;
        case 'delete2':
          deleteDecoration2(data);
          break;
      };
    });

    var mainIndex;
    var url;

    //打开添加的弹出层
    function openAddLayer() {
      mainIndex = layer.open({
        type: 1,
        content: $("#addOrUpdateDiv"),
        area: ['600px', '120px'],
        title: '添加装修风格',
        success: function () {
          $("#dataFrm")[0].reset();
          url = "/admin/decoration/addDecoration";
        }
      });
    }

    //打开修改的弹出层
    function openUpdateDecorationLayer(data) {
      mainIndex = layer.open({
        type: 1,
        content: $("#addOrUpdateDiv"),
        area: ['600', '120px'],
        title: '修改装修风格',
        success: function () {
          $("#dataFrm")[0].reset();
          //装载新的数据
          form.val("dataFrm", data);
          url = "/admin/decoration/updateDecoration";
        }
      });
    }

    form.on("submit(doSubmit)", function (data) {
      // layer.msg(JSON.stringify(data.field));
      $.post(url, data.field, function (res) {
        if (res.code == 200) {
          tableIns.reload();
          $.ajax({
            url: "/admin/decoration/getDecoration2",
            success: function (res){
              var decorations = res.data;
              var html = "<option value='0'>请选择装修风格</option>";
              $.each(decorations, function (index, item) {
                html += "<option value='" + item.id + "'>" + item.style + "</option>";
              });
              $("#search_decoration").html(html);
              form.render("select");
            },
            dataType: "json"
          });
        }
        layer.msg(res.msg);
        layer.close(mainIndex);
      })
      return false;
    })

    //改为不可用
    function deleteDecoration(data) {
      layer.confirm('你确定要将【' + data.style + '】这个装修风格改为不可用吗?', {icon: 3, title: '提示'}, function (index) {
        // alert(data.id);
        $.post("/admin/decoration/deleteDecoration", {id: data.id, available: 0}, function (res) {
          if (res.code == 200) {
            tableIns.reload();
            $.ajax({
              url: "/admin/decoration/getDecoration2",
              success: function (res){
                var decorations = res.data;
                var html = "<option value='0'>请选择装修风格</option>";
                $.each(decorations, function (index, item) {
                  html += "<option value='" + item.id + "'>" + item.style + "</option>";
                });
                $("#search_decoration").html(html);
                form.render("select");
              },
              dataType: "json"
            });
          }
          layer.msg(res.msg);
        })
        layer.close(index);
      });
    }

    //改为可用
    function deleteDecoration2(data) {
      layer.confirm('你确定要将【' + data.style + '】这个装修风格改为可用吗?', {icon: 3, title: '提示'}, function (index) {
        // alert(data.id);
        $.post("/admin/decoration/deleteDecoration", {id: data.id, available: 1}, function (res) {
          if (res.code == 200) {
            tableIns.reload();
            $.ajax({
              url: "/admin/decoration/getDecoration2",
              success: function (res){
                var decorations = res.data;
                var html = "<option value='0'>请选择装修风格</option>";
                $.each(decorations, function (index, item) {
                  html += "<option value='" + item.id + "'>" + item.style + "</option>";
                });
                $("#search_decoration").html(html);
                form.render("select");
              },
              dataType: "json"
            });
          }
          layer.msg(res.msg);
        })
        layer.close(index);
      });
    }
  });
</script>
</body>
</html>